<template>
  <div id="agent">
    <!--搜索-->
    <div class="search-content">
      <div>
        <el-select v-model="agent" clearable placeholder="请选择代理名称"  @change="inquiryList" >
          <el-option
            v-for="item in agentList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          id="month-select"
          v-model="month"
          type="month"
          @change="inquiryList"
          value-format="yyyy-MM"
          placeholder="选择月份">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
      </div>
      <div class="search-apply">
        <el-button type="warning" class="agent-init" icon="el-icon-edit" @click="initAgent">分润初始化</el-button>
      </div>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="记录id" prop="id"  align="center" />
        <el-table-column label="代理名称" prop="agent"  align="center">
          <template slot-scope="scope" v-if="scope.row.agent">
            <div>{{scope.row.agent.name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="分成月份" prop="profitMoth"  align="center" />
        <el-table-column label="充值金币提成" prop="rechargeCoins"  align="center" />
        <el-table-column label="升级会员提成" prop="upgradeMember"  align="center" />
        <el-table-column label="金币升级会员提成" prop="goldUpgradeMember"  align="center" />
        <el-table-column label="金币上墙提成" prop="goldUpperWall"  align="center" />
        <el-table-column label="礼物提成" prop="receivingGifts"  width="110" align="center" />
        <el-table-column label="表情提成" prop="goldExpression"  width="110" align="center" />
        <el-table-column label="总提成" prop="total"  align="center" />
        <el-table-column label="操作"  width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="dealwithUpdate(scope.$index, scope.row)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--分润初始化蒙层-->
    <el-dialog id="init-dialog" title="代理月分润初始化" :visible.sync="initDialogVisible">
      <el-form label-position="right" label-width="30%"  :model="init"  :rules="initRules" ref="initRuleForm">
        <el-form-item label="初始化几个月：" prop="month">
          <el-input v-model="init.month" placeholder="请输入需要初始化前几个月的代理分润" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="initSubmit('initRuleForm')">初始化</el-button>
      </span>
    </el-dialog>
    <!--更新-->
    <el-dialog :visible.sync="updateDialogVisible" width="300px" center id="del-dialog" top="20%">
      <span>您确定要更新分润记录吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateSubmit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  import axios from 'axios'
  export default {
    name: "monthProfit",
    data(){
      var checkMonth = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('内容不能为空'));
        }else if(!/^([1-9]|1[0-2])$/.test(value)){
          return callback(new Error('只能输入1-12中的整数'));
        }else {
          callback();
        }
      };
      return{
        // 查询
        agent:'',
        agentList:[],
        month:"",
        // 列表数据
        tableData:[],
        //新增
        initDialogVisible:false,
        init:{
          month:"",
        },
        initRules:{
          month:[{validator: checkMonth, trigger: 'blur' }]
        },
        // 删除
        updateId:null,
        updateDialogVisible:false,
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0
      }
    },
    mounted() {
      this.inquiryAgentList();
      this.inquiryList();
    },
    methods:{
      isNotNull(value){
        return value !== null && value !== undefined && value !== "";
      },
      //查询代理下拉列表
      inquiryAgentList(){
        let that=this;
        request({
          method: 'get',
          url: 'admin/agent/all/select',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(function (res) {
          if (res.code === 200) {
            let arr=res.data;
            if(arr.length>0){
              for (let i = 0; i <arr.length; i++) {
                that.agentList.push({
                  label:arr[i].name,
                  value:arr[i].id
                })
              }
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //查询列表
      inquiryList(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
        if(this.isNotNull(that.month)){  //月份
          data.filters.push({
            property:"date_format(mp.profit_moth,'%Y-%m')",
            value:that.month,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.agent)){ //代理
          data.filters.push({
            property:"mp.agent_id",
            value:that.agent,
            operator: "eq"
          })
        }
        request({
          method: 'post',
          url: 'admin/monthly/profit/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      initAgent(){
        this.initDialogVisible=true;
      },
      initSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that=this;
            request({
              method: 'post',
              url: 'admin/monthly/profit/init/'+that.init.month
            }).then(function (res) {
              if(res.code===200){
                that.initDialogVisible = false;
                Message.success("初始化成功");
                that.$refs['initRuleForm'].resetFields();
                that.inquiryList();
              }
            }).catch(function (error) {
              console.log(error);
            });
          }else {
            return false;
          }
        });
      },

      //更新
      dealwithUpdate(index, row){
        this.updateDialogVisible=true;
        this.updateId=row.id;
      },
      updateSubmit(){
        let that=this;
        that.updateDialogVisible=false;
        request({
          method: 'post',
          url: 'admin/monthly/profit/update/'+that.updateId,
        }).then(function (res) {
          if(res.code===200){
            Message.success("更新成功");
            that.updateId=null;
            that.inquiryList();
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.inquiryList();
      }
    }
  }
</script>

<style src="../../assets/css/agentManagement/agentlist.css">

</style>
